﻿@{
    ViewBag.Title = "TabStrip : Hide/Show/Remove Content";
}

<h2>TabStrip : Hide/Show/Remove Content</h2>

<h3>Sample</h3>

@{
    Html.Telerik().TabStrip()
        .Name("SampleTabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Tab 1")
                .Selected(true)
                .Content(
                    @<text>
                    <p>Content for the first tab.</p>
                    </text>
                );
            tabstrip.Add()
                .Text("Tab 2")
                .Content(
                    @<text>
                    <p>Content for the second tab.</p>
                    </text>
                );
        })
        .Render();
}

<br />

<button onclick="hideContent()">Hide Content</button>
<button onclick="showContent()">Show Content</button>
<button onclick="removeContent()">Remove Content</button>

<h3>Documentation</h3>
<p>
When the 'Hide Content' button is clicked, the hideContent() function hides the content for all the tabs.  When the
'Show Content' button is clicked, the showContent() funtion shows the content for all the tabs.  When the 'Remove Content'
button is clicked, the removeContent() function removes the content for all the tabs from the DOM and the content cannot
be retrieved.<br />
<br />
Here are the functions that get called:
</p>
<pre class="code">
hideContent = function() {
    $('#SampleTabStrip').data('tTabStrip').hideContent();
}

showContent = function() {
    $('#SampleTabStrip').data('tTabStrip').showContent();
}

removeContent = function() {
    if (confirm("'Remove Content' will remove the tabstrip content until\nthe page is reloaded.  Click 'OK' to continue.")) {
        $('#SampleTabStrip').data('tTabStrip').removeContent();
    }
}
</pre>

<script type="text/javascript">
    hideContent = function () {
        $('#SampleTabStrip').data('tTabStrip').hideContent();
    }

    showContent = function () {
        $('#SampleTabStrip').data('tTabStrip').showContent();
    }

    removeContent = function () {
        if (confirm("'Remove Content' will remove the tabstrip content until\nthe page is reloaded.  Click 'OK' to continue.")) {
            $('#SampleTabStrip').data('tTabStrip').removeContent();
        }
    }
</script>
